Skip to content

Latest commit

 

History

History
108 lines (85 loc) · 2.85 KB

createForm.mdx

File metadata and controls

108 lines (85 loc) · 2.85 KB
Raw

import { A } from 'solid-start'; import { HttpStatusCode } from 'solid-start/server'; import { Description, Property, QwikPreactOrReact, Solid, Title, } from '~/components';

<Title>createForm</Title> Creates and returns the store of the form as well as a linked Form, Field and FieldArray component.

createForm

Creates and returns the store of the form as well as a linked Form, Field and FieldArray component.

const [form, { Form, Field, FieldArray }] = createForm<Values, ResponseData>(
  options
);

If you prefer to use the library as modular as possible, you can use the createFormStore hook instead.

Generic

  • Values <Property {...properties.Values} />
  • ResponseData <Property {...properties.ResponseData} />

Explanation

If you use TypeScript, you should define your field values. This way the library knows exactly which fields your form has and what values they expect. It also allows autocompletion and TypeScript notifies you of typos.

It is recommended to use type instead of interface as this currently requires an explicit index signature in TypeScript. More about this <a href={${import.meta.env.VITE_GITHUB_URL}/issues/2#issuecomment-1321178563} target="_blank" rel="noreferrer">here.

Parameter

  • options <Property {...properties.options} />

Return

  • form <Property {...properties.form} />
  • Form <Property {...properties.Form} />
  • Field <Property {...properties.Field} />
  • FieldArray <Property {...properties.FieldArray} />

Explanation

Since the Form, Field and FieldArray components are already linked to your form, you don't need to add the of property.

This page is exclusively for the SolidJS library of Modular Forms.

export const properties = { Values: { type: { type: 'custom', name: 'FieldValues', href: '../FieldValues' }, }, ResponseData: { type: { type: 'custom', name: 'Maybe', href: '../Maybe', generics: [ { type: 'custom', name: 'ResponseData', href: '../ResponseData', }, ], }, defaultValue: 'undefined', }, options: { type: { type: 'custom', name: 'Maybe', href: '../Maybe', generics: [ { type: 'custom', name: 'FormOptions', href: '../FormOptions' }, ], }, }, form: { type: { type: 'custom', name: 'FormStore', href: '../FormStore' }, }, Form: { type: { type: 'custom', name: 'Form', href: '../Form' }, }, Field: { type: { type: 'custom', name: 'Field', href: '../Field' }, }, FieldArray: { type: { type: 'custom', name: 'FieldArray', href: '../FieldArray' }, }, };